<template>
  <div>
    <!-- 搜索栏和操作按钮 -->
    <div class="search-bar">
      <el-input v-model="searchParams.username" style="width: 240px" placeholder="请输入用户名" />
      <el-input v-model="searchParams.phone" style="width: 240px;padding-left: 20px;padding-right: 20px" placeholder="请输入手机号" />
      <el-button type="primary" @click="searchUser">搜索</el-button>
      <el-button type="primary" @click="openAddDialog">新增普通用户</el-button>
      <el-button type="danger" @click="batchDelete" >批量删除</el-button>
    </div>
    <!-- 用户列表表格 -->
    <el-table :data="userList"  @selection-change="handleSelectionChange" border style="width: 100%">
      <el-table-column type="selection" width="55" @selection-change="handleSelectionChange" />
      <el-table-column prop="id" label="ID" />
      <el-table-column prop="username" label="用户名" />
      <el-table-column prop="password" label="密码" />
      <el-table-column prop="phone" label="手机号" />
      <el-table-column prop="point" label="积分" />
      <el-table-column prop="address" label="地址" />
      <el-table-column label="操作">
        <template #default="scope">
          <el-button type="text" @click="openEditDialog(scope.row)">编辑</el-button>
          <el-button type="text" @click="deleteUser(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <div class="pagination">
      <!--      共 {{ total }} 条-->
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
      />
    </div>
    <!-- 新增用户对话框 -->
    <el-dialog v-model="addDialogVisible" title="新增用户">
      <el-form :model="newUser" label-width="100px">
        <el-form-item label="* 用户名" prop="username">
          <el-input v-model="newUser.username" placeholder="请输入用户名" style="width: 300px;">
            <template #error>请输入用户名</template>
          </el-input>
        </el-form-item>
        <el-form-item label="* 密码" prop="password">
          <el-input v-model="newUser.password" placeholder="请输入密码" style="width: 300px;">
            <template #error>请输入密码</template>
          </el-input>
        </el-form-item>
        <el-form-item label="* 手机号" prop="phone">
          <el-input v-model="newUser.phone" placeholder="请输入手机号" style="width: 300px;">
            <template #error>请输入手机号</template>
          </el-input>
        </el-form-item>
        <el-form-item label="* 积分" prop="point">
          <el-input v-model="newUser.point" placeholder="请输入积分" style="width: 300px;">
            <template #error>请输入积分</template>
          </el-input>
        </el-form-item>
        <el-form-item label="* 地址" prop="address">
          <el-input v-model="newUser.address" placeholder="请输入地址" style="width: 300px;">
            <template #error>请输入地址</template>
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmAddUser">确定</el-button>
      </div>
    </el-dialog>
    <!-- 编辑用户对话框 -->
    <el-dialog v-model="editDialogVisible" title="编辑用户">
      <el-form :model="editUser" label-width="100px">
        <el-form-item label="* 用户名" prop="username">
          <el-input v-model="editUser.username" placeholder="请输入用户名" style="width: 300px;">
            <template #error>请输入用户名</template>
          </el-input>
        </el-form-item>
        <el-form-item label="* 密码" prop="password">
          <el-input v-model="editUser.password" placeholder="请输入密码" style="width: 300px;">
            <template #error>请输入密码</template>
          </el-input>
        </el-form-item>
        <el-form-item label="* 手机号" prop="phone">
          <el-input v-model="editUser.phone" placeholder="请输入手机号" style="width: 300px;">
            <template #error>请输入手机号</template>
          </el-input>
        </el-form-item>
        <el-form-item label="* 积分" prop="point">
          <el-input v-model="editUser.point" placeholder="请输入积分" style="width: 300px;">
            <template #error>请输入积分</template>
          </el-input>
        </el-form-item>
        <el-form-item label="* 地址" prop="address">
          <el-input v-model="editUser.address" placeholder="请输入地址" style="width: 300px;">
            <template #error>请输入地址</template>
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmEditUser">确定</el-button>
        <el-button type="danger" @click="deleteSingleUserInDialog">删除</el-button>
      </div>
    </el-dialog>
  </div>
  <div>
    <!-- 页面内容 -->

  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import axios from 'axios';
const multipleSelection = ref([])


// 搜索参数
const searchParams = ref({
  username: '',
  phone: ''
});
// 用户列表
const userList = ref([]);
// 总记录数
const total = ref(0);
// 当前页码
const currentPage = ref(1);
// 每页显示数量
const pageSize = ref(5);
// 选中的用户 ID 列表
const selectedIds = ref([]);
// 新增用户对话框显示状态
const addDialogVisible = ref(false);
// 新增用户信息
const newUser = ref({
  username: '',
  password: '',
  phone: '',
  point: '',
  address: ''
});
// 编辑用户对话框显示状态
const editDialogVisible = ref(false);
// 编辑用户信息
const editUser = ref({
  id: null,
  username: '',
  password: '',
  phone: '',
  point: '',
  address: ''
});

// 获取用户列表
const getUsers = async () => {
  try {
    const response = await axios.get('http://localhost:8080/pubUser/list', {
      params: {
        ...searchParams.value,
        pageNum: currentPage.value,
        pageSize: pageSize.value
      }
    });
    console.log('响应数据:', response.data);
    userList.value = response.data.list;
    total.value = response.data.total;
  } catch (error) {
    console.error('获取用户列表失败:', error);
  }
};

// 搜索用户
const searchUser = () => {
  currentPage.value = 1;
  getUsers();
};

// 打开新增用户对话框
const openAddDialog = () => {
  newUser.value = {
    username: '',
    password: '',
    phone: '',
    point: '',
    address: ''
  };
  addDialogVisible.value = true;
};

// 确认新增用户
const confirmAddUser = async () => {
  try {
    await axios.post('http://localhost:8080/pubUser/add', newUser.value);
    addDialogVisible.value = false;
    getUsers();
  } catch (error) {
    console.error('新增用户失败:', error);
  }
};

// 删除单个用户
const deleteUser = async (id) => {
  try {
    await axios.delete(`http://localhost:8080/pubUser/delete/${id}`);
    getUsers();
  } catch (error) {
    console.error('删除用户失败:', error);
  }
};

// 批量删除用户
const batchDelete = async () => {

  if (selectedIds.value.length === 0) return;
  try {
    console.log('批量删除的用户 ID:', selectedIds.value);
    await axios.delete('http://localhost:8080/pubUser/delete/batch', {
      data: selectedIds.value,
      headers: {
        'Content-Type': 'application/json'
      }
    });
    selectedIds.value = [];
    getUsers();
  } catch (error) {
    console.error('批量删除用户失败:', error);
  }
};

// 处理表格选择变化
const handleSelectionChange = (val) => {
  selectedIds.value = val.map(item => item.id);
};

// 处理每页数量变化
const handleSizeChange = (newSize) => {
  pageSize.value = newSize;
  getUsers();
};

// 处理页码变化
const handleCurrentChange = (newPage) => {
  currentPage.value = newPage;
  getUsers();
};

// 打开编辑用户对话框
const openEditDialog = (user) => {
  editUser.value = {...user};
  editDialogVisible.value = true;
};

// 确认编辑用户
const confirmEditUser = async () => {
  try {
    console.log('编辑用户信息:', editUser.value);
    await axios.put(`http://localhost:8080/pubUser/edit/${editUser.value.id}`, editUser.value);
    editDialogVisible.value = false;
    getUsers();
  } catch (error) {
    console.error('编辑用户失败:', error);
  }
};

// 在编辑对话框中删除单个用户
const deleteSingleUserInDialog = async () => {
  try {
    await axios.delete(`http://localhost:8080/pubUser/delete/${editUser.value.id}`);
    editDialogVisible.value = false;
    getUsers();
  } catch (error) {
    console.error('删除用户失败:', error);
  }
};

// 组件挂载时获取用户列表
onMounted(() => {
  getUsers();
});
</script>

<style scoped>
.search-bar {
  margin-bottom: 10px;
}

.pagination {
  margin-top: 10px;
}
</style>